import { defineView } from "@/routers/tools.mjs";

// TODO: with Custom_Highlight
/**
 * @type {DefineView}
 */
const NgRepeatFilterView = defineView({
  controller: class {
    static $inject = ["$scope"];

    /**
     * @param {ng.WIScope} $scope
     */
    constructor($scope) {
      $scope.friends = [
        { name: "John", age: 25, gender: "boy" },
        { name: "Jessie", age: 30, gender: "girl" },
        { name: "Johanna", age: 28, gender: "girl" },
        { name: "Joy", age: 15, gender: "girl" },
        { name: "Mary", age: 28, gender: "girl" },
        { name: "Peter", age: 95, gender: "boy" },
        { name: "Sebastian", age: 50, gender: "boy" },
        { name: "Erika", age: 27, gender: "girl" },
        { name: "Patrick", age: 40, gender: "boy" },
        { name: "Samantha", age: 60, gender: "girl" },
      ];
    }
  },
  template: /* HTML */ html`
    <div>
      <p>I have {{friends.length}} friends.</p>
      <p>
        They are:
        <input
          type="search"
          ng-model="q"
          placeholder="filter friends..."
          aria-label="filter friends"
        />
      </p>
      <ul class="example-animate-container">
        <li
          ng-repeat="friend in friends | filter:q as results track by friend.name"
          class="animate-repeat"
        >
          [{{$index + 1}}] {{friend.name}} who is {{friend.age}} years old.
        </li>
        <li class="animate-repeat" ng-if="results.length === 0">
          <strong>No results found...</strong>
        </li>
      </ul>
    </div>
  `,
});

export default NgRepeatFilterView;
